<template>
  <div style="height:100vh">
    <div class="title_box">
      <div class="back">后退</div>
      <div class="title_name">创建任务</div>
      <div class="submit">提交</div>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="ruleForm.taskName"></el-input>
      </el-form-item>
      <el-form-item label="股票代码" prop="stockCode">
        <el-input v-model="ruleForm.stockCode"></el-input>
      </el-form-item>
      <el-form-item label="每笔数量" prop="quantity">
        <el-input v-model="ruleForm.quantity"></el-input>
      </el-form-item>
      <el-form-item label="高抛幅度" prop="highAmplitude">
        <el-input v-model="ruleForm.highAmplitude"></el-input>
      </el-form-item>
      <el-form-item label="低吸幅度" prop="lowAmplitude">
        <el-input v-model="ruleForm.lowAmplitude"></el-input>
      </el-form-item>
      <el-form-item label="未配对低吸限制" prop="unpairedLowLimit">
        <el-input v-model="ruleForm.unpairedLowLimit"></el-input>
      </el-form-item>
      <el-form-item label="未配对高抛限制" prop="unpairedHighLimit">
        <el-input v-model="ruleForm.unpairedHighLimit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        taskName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        stockCode: [
          { required: true, message: '请输入股票代码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度为6位数字', trigger: 'blur' }
        ]
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              alert('submit!')
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        resetForm(formName) {
          this.$refs[formName].resetFields()
        }
      }
    }
  }
}
</script>
<style Lang="less" scoped>
.title_box {
  display: flex;
  font-size: 16px;
  text-align: center;
  margin: 20px;
}
.back {
  flex: 1;
}
.title_name {
  flex: 1;
}
.submit {
  flex: 1;
}
</style>
